<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #d6d6d6;
        }
        li span{
            display: inline-block;
        }
        li p{
            float: right;
            margin-right: 20px;
            padding: 0px 6px;
            text-align: center;
            font-size: 14px;


        }
        li span{
            padding: 6px;
        }
        #content{
            width: 400px;
            background: rgb(240, 240, 240);
        }
        #content > ol > li > a{
            text-decoration: none;
            color: blue;
        }

    </style>


</head>
<body>
<div id="content">
    <h1>搜索热点</h1>
    <ol>
        <li><span>1</span><a href="">梅西进球超越C罗</a><p>442万</p></li>
        <li><span>2</span><a href="">沙特股市大跌</a><p>423万</p></li>
        <li><span>3</span><a href="">南京暂停现场祭扫</a><p>397万</p></li>
        <li><span>4</span><a href="">新白宫办公厅主任</a><p>396万</p></li>
        <li><span>5</span><a href="">许昕无缘男单决赛</a><p>394万</p></li>
        <li><span>6</span><a href="">阿联酋全国听课</a><p>392万</p></li>
        <li><span>7</span><a href="">安徽确诊病例清零</a><p>335万</p></li>
        <li><span>8</span><a href="">新疆确诊病例清零</a><p>218万</p></li>
        <li class="aaa"><span>9</span><a href="">抗疫巾帼英雄名单</a><p>176万</p></li>
        <li><span>10</span><a href="">张伟丽卫冕金腰带</a><p>176万</p></li>
        <li><span>11</span><a href="">世界疫情形势</a><p>127万</p></li>
        <li class="aaa"><span>12</span><a href="">纽约州紧急状态</a><p>123万</p></li>
        <li><span>13</span><a href="">龙吟被控骚扰女性</a><p>113万</p></li>
        <li><span>14</span><a href="">马龙许昕男双夺冠</a><p>110万</p></li>
        <li><span>15</span><a href="">沙特国王弟弟被捕</a><p>108万</p></li>
    </ol>
</div>

</body>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function () {
        $('#content>ol>li>span').css({'display':'inline-block',
            'width':'13px','height':'10px','text-alige':'center','line-height':'10px',
            'margin-right':'3px','fontSizse':'14px','color':'white'});
        $('#content>ol>li>span:gt(2)').css({'backgroundColor':'#8eb9f5'});
        $('#content>ol>li>span:eq(0)').css({'backgroundColor':'red'});
        $('#content>ol>li>span:eq(1)').css({'backgroundColor':'#ff8547'});
        $('#content>ol>li>span:eq(2)').css({'backgroundColor':'#ffac38'});
        $('#content>ol>li:not(.aaa)').css({'background':'url(red.png)right -4px no-repeat'})

    })
</script>
</html>